<template>
  <div class="recommend">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="b in banners" :key="b.bannerId">
        <img :src="b.pic"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <list-title>编辑推荐</list-title>
    <div class="recommendList" v-if="recommedList.length>0">
      <div v-for="list in recommedList" :key="list.id">
         <router-link :to="`/playlist/${list.id}`">
          <img-item :item="list"></img-item>
         </router-link>

      </div>
    </div>
    <music-loading v-else></music-loading>
    <list-title>最新音乐</list-title>
    <song-list v-if="newSongList.length>0" :songlist="newSongList" @play="$emit('play',$event)"></song-list>
    <music-loading v-else></music-loading>

    <list-title>热门MV</list-title>
    <div class="recommendList" v-if="recommedList.length>0">
      <div v-for="list in mv" :key="list.id">
         <router-link :to="`/Video/${list.id}`">
          <img-item :item="list"></img-item>
         </router-link>
      </div>
    </div>
    <list-title>热门歌手</list-title>
    <div class="recommendList" v-if="recommedList.length>0">
      <div v-for="list in hotSingger" :key="list.id">
         <router-link :to="`/Singer/${list.id}`">
          <img-item :item="list"></img-item>
         </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import ListTitle from '@/components/ListTitle'
import ImgItem from '@/components/ImgItem'
import SongList from '@/components/SongList'
import MusicLoading from "@/components/MusicLoading"
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    data(){
      return {
        recommedList:[],
        newSongList:[],
        hotSingger:[],
        banners:[],
        mv:[],
        swiperOption:{
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
    created(){
      this.getRecommendList();
      this.getNewSong();
      this.getbanners();
      this.getSingger();
      this.getMv();
    },
    methods:{
      async getRecommendList(){
        //获取推荐歌单
          let re=await this.axios.get("/personalized?limit=6"); 
          this.recommedList=re.result;
      },
      async getSingger(){
        let re=await this.axios.get("/top/artists?offset=0&limit=9");
        this.hotSingger=re.artists;
      },
      async getMv(){
        let re=await this.axios.get("/mv/first?limit=9");
        this.mv=re;
        console.log("MV==>",this.mv);
      },
      
      async getNewSong(){
        //获取最新音乐
        let re=await this.axios.get("/personalized/newsong?limit=10");
          this.newSongList=re.result;
      },
      async getbanners(){
        let re=await this.axios.get("/banner?type=2");
          this.banners=re.banners

      }
    },
    components:{
      ListTitle,
      ImgItem,
      SongList,
      MusicLoading,
      Swiper, SwiperSlide
    }
}
</script>
<style lang="less" scoped>
.recommend{
  .recommendList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &>div{
      width:33%;
    }
  }
}
.swiper{
  img{
    width:100%;
    display: block;
  }
}
</style>